<template>
  <view class="container">
    <!-- 慢病管理入口 -->
    <view class="service-section">
      <van-cell-group>
        <van-cell
          title="慢病建档"
          label="建立慢性疾病档案，便于长期管理"
          is-link
          @click="navigateTo('/pages/chronic-disease/record')"
        >
          <template #icon>
            <van-icon name="records" color="#07C160" />
          </template>
        </van-cell>
        <van-cell
          title="线上随访"
          label="定期随访，跟踪病情变化"
          is-link
          @click="navigateTo('/pages/chronic-disease/follow-up')"
        >
          <template #icon>
            <van-icon name="calendar-o" color="#ff6b35" />
          </template>
        </van-cell>
      </van-cell-group>
    </view>

    <!-- 我的慢病档案 -->
    <view class="record-section">
      <van-cell title="我的慢病档案" :border="false" />
      <view v-if="chronicDiseases.length === 0" class="empty-state">
        <van-empty description="暂无慢病档案">
          <van-button
            type="primary"
            size="small"
            @click="navigateTo('/pages/chronic-disease/record')"
          >
            立即建档
          </van-button>
        </van-empty>
      </view>
      <view v-else class="disease-list">
        <van-card
          v-for="disease in chronicDiseases"
          :key="disease.id"
          :title="disease.name"
          :desc="disease.description"
          :thumb="disease.icon"
        >
          <template #footer>
            <van-button size="mini" type="primary" @click="viewDetails(disease)">
              查看详情
            </van-button>
            <van-button size="mini" plain @click="followUp(disease)">
              随访记录
            </van-button>
          </template>
          <template #tags>
            <van-tag type="danger" v-if="disease.riskLevel === 'high'">高风险</van-tag>
            <van-tag type="warning" v-else-if="disease.riskLevel === 'medium'">中风险</van-tag>
            <van-tag type="success" v-else>低风险</van-tag>
          </template>
        </van-card>
      </view>
    </view>

    <!-- 健康提醒 -->
    <view class="reminder-section">
      <van-cell title="健康提醒" :border="false" />
      <van-cell-group>
        <van-cell
          v-for="reminder in healthReminders"
          :key="reminder.id"
          :title="reminder.title"
          :label="reminder.time"
          :value="reminder.status"
          :value-class="reminder.status === '待完成' ? 'status-pending' : 'status-completed'"
        >
          <template #icon>
            <van-icon :name="reminder.icon" :color="reminder.color" />
          </template>
        </van-cell>
      </van-cell-group>
    </view>

    <!-- 健康数据趋势 -->
    <view class="trend-section">
      <van-cell title="健康数据趋势" :border="false" />
      <view class="trend-cards">
        <view
          v-for="metric in healthMetrics"
          :key="metric.type"
          class="trend-card"
          @click="viewTrend(metric)"
        >
          <view class="metric-value">{{ metric.value }}</view>
          <view class="metric-unit">{{ metric.unit }}</view>
          <view class="metric-name">{{ metric.name }}</view>
          <view
            class="metric-trend"
            :class="{
              'trend-up': metric.trend === 'up',
              'trend-down': metric.trend === 'down'
            }"
          >
            <van-icon :name="metric.trend === 'up' ? 'arrow-up' : 'arrow-down'" />
            {{ metric.changeText }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface ChronicDisease {
  id: number;
  name: string;
  description: string;
  icon: string;
  riskLevel: 'high' | 'medium' | 'low';
  createTime: string;
}

interface HealthReminder {
  id: number;
  title: string;
  time: string;
  status: string;
  icon: string;
  color: string;
}

interface HealthMetric {
  type: string;
  name: string;
  value: string;
  unit: string;
  trend: 'up' | 'down' | 'stable';
  changeText: string;
}

const chronicDiseases = ref<ChronicDisease[]>([
  {
    id: 1,
    name: "高血压",
    description: "原发性高血压，需长期监测血压",
    icon: "/static/hypertension.png",
    riskLevel: "medium",
    createTime: "2024-01-15"
  },
  {
    id: 2,
    name: "糖尿病",
    description: "2型糖尿病，需控制血糖",
    icon: "/static/diabetes.png",
    riskLevel: "high",
    createTime: "2024-02-20"
  }
]);

const healthReminders = ref<HealthReminder[]>([
  {
    id: 1,
    title: "测量血压",
    time: "今天 08:00",
    status: "待完成",
    icon: "clock-o",
    color: "#ff6b35"
  },
  {
    id: 2,
    title: "服用降压药",
    time: "今天 12:00",
    status: "已完成",
    icon: "completed",
    color: "#07C160"
  },
  {
    id: 3,
    title: "血糖监测",
    time: "今天 18:00",
    status: "待完成",
    icon: "clock-o",
    color: "#ff6b35"
  }
]);

const healthMetrics = ref<HealthMetric[]>([
  {
    type: "blood_pressure",
    name: "血压",
    value: "135/85",
    unit: "mmHg",
    trend: "up",
    changeText: "较昨天上升"
  },
  {
    type: "blood_sugar",
    name: "血糖",
    value: "7.2",
    unit: "mmol/L",
    trend: "down",
    changeText: "较昨天下降"
  },
  {
    type: "weight",
    name: "体重",
    value: "72.5",
    unit: "kg",
    trend: "stable",
    changeText: "保持稳定"
  }
]);

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const viewDetails = (disease: ChronicDisease) => {
  console.log("查看疾病详情:", disease);
  uni.showToast({
    title: "功能开发中",
    icon: "none"
  });
};

const followUp = (disease: ChronicDisease) => {
  navigateTo(`/pages/chronic-disease/follow-up?diseaseId=${disease.id}`);
};

const viewTrend = (metric: HealthMetric) => {
  console.log("查看趋势:", metric);
  uni.showToast({
    title: "功能开发中",
    icon: "none"
  });
};

onLoad(() => {
  console.log("慢病医疗首页 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.service-section,
.record-section,
.reminder-section,
.trend-section {
  background: white;
  margin-bottom: 16rpx;
}

.empty-state {
  padding: 64rpx 32rpx;
}

.disease-list {
  padding: 16rpx;
}

.status-pending {
  color: #ff6b35;
}

.status-completed {
  color: #07C160;
}

.trend-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  padding: 16rpx;
}

.trend-card {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 32rpx 16rpx;
  text-align: center;
  position: relative;
}

.metric-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.metric-unit {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}

.metric-name {
  font-size: 28rpx;
  color: #333;
  margin-top: 16rpx;
}

.metric-trend {
  font-size: 24rpx;
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.trend-up {
    color: #ee0a24;
  }
  
  &.trend-down {
    color: #07C160;
  }
}
</style>